<template>
  <div class="container" ref="foots">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">足迹</p>
    </van-nav-bar>
    <van-cell title="选择日期" :value="date" @click="show = true"/>
    <van-calendar :default-date="null" :min-date="minDate" :max-date="maxDate" v-model="show" @confirm="onConfirm"/>
    <div class="content">
      <van-row>
        <van-col :span="12" v-for="item in footprint" :key="item.fid"
                 style="display: flex;padding: 3px;box-sizing: border-box">
          <shop-card style="width: 100%;margin: auto;box-sizing: border-box" :shop-data="item"></shop-card>
        </van-col>
      </van-row>
      <van-empty image="search" v-if="!footprint||!footprint.length" description="没有足迹"></van-empty>
    </div>
  </div>
</template>

<script>
import { Calendar } from 'vant'
import { requestGetFootPrint } from '../../api/footprint'
import shopCard from '../../components/shop/ShopCard'
import Vue from 'vue'
import $throttle from '../../../public/js/speed'

let reload = false
Vue.use(Calendar)
export default {
  name: 'Keep',
  data () {
    return {
      show: false,
      date: '请选择日期',
      timeStamp: '',
      minDate: new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000),
      maxDate: new Date(new Date().getTime()),
      footprint: [],
      once: true
    }
  },
  created () {
    this.maxDate.setHours(0)
    this.maxDate.setMinutes(0)
    this.maxDate.setSeconds(0)
  },
  mounted () {
    this.loadNowData()
  },
  beforeRouteEnter (to, from, next) {
    if (from.name === 'My') {
      reload = true
    } else {
      reload = false
    }
    next()
  },
  activated () {
    if (reload) {
      this.date = '请选择日期'
      this.loadNowData()
      this.$notify({ type: 'success', message: '足迹可以追踪您的浏览商品历史' })
    }
    window.dispatchEvent(new Event('resize'))
    this.$refs.foots.scrollTop = localStorage.getItem('footprint') || 0
  },
  methods: {
    back () {
      this.$router.back()
    },
    loadNowData () {
      var zero = new Date(new Date().getTime())
      zero.setHours(0)
      zero.setMinutes(0)
      zero.setSeconds(0)
      this.timeStamp = zero.getTime()
    },
    onConfirm (date) {
      var cur = new Date(date.getTime())
      var zero = new Date(date.getTime())
      zero.setDate(zero.getDate())
      this.date = (cur.getMonth() + 1) + '月' + zero.getDate() + '日'
      this.timeStamp = zero.getTime()
      this.show = false
    }
  },
  watch: {
    timeStamp (value) {
      requestGetFootPrint(value).then(res => {
        setTimeout(() => {
          this.footprint = res.data
        }, 300)
        if (this.once) {
          this.$refs.foots.addEventListener('scroll', () => {
            $throttle(() => {
              localStorage.setItem('footprint', this.$refs.foots.scrollTop)
            }, 300)
          })
          this.once = false
        }
      })
    }
  },
  components: {
    shopCard
  }
}
</script>

<style lang="scss" scoped>
.container {
  text-align: left;
  height: 100vh;
  overflow: auto;

  .content {
    padding: 4px;
    overflow: auto;
  }
}
</style>
